<template>
  <div class="wrapper">
    <a-tabs :selectTabKey="selectTabKey" @change="changeActive">
      <a-tab-pane key="1">
        <span class="tab-title" slot="tab">
          待办流程
          <div class="taskNum" v-if="parseInt(countList.toDoProcessNum) > 0">{{ countList.toDoProcessNum }}</div>
        </span>
      </a-tab-pane>
      <a-tab-pane key="2">
        <span class="tab-title" slot="tab">
          待执行任务
          <div class="taskNum" v-if="parseInt(countList.outTask) > 0">{{ countList.outTask }}</div>
        </span>
      </a-tab-pane>
      <a-tab-pane key="3">
        <span class="tab-title" slot="tab">
          待审核任务
          <div class="taskNum" v-if="parseInt(countList.tasksToBeReviewed) > 0">{{ countList.tasksToBeReviewed }}</div>
        </span>
      </a-tab-pane>
    </a-tabs>
    <common-table
      ref="commonTable"
      :columns="columns"
      :tableData="dataSource"
      :selectType="'checkbox'"
      :data-row-key="tableKey"
    ></common-table>
  </div>
</template>
<script>
import commonTable from "@/components/common/commonTable";
import { tabColumnFirst,tabDataFirst,tabColumnSecond,tabDataSecond,tabColumnThird,tabDataThird } from './data'
export default {
  data() {
    return {
      selectTabKey:'1',
      countList:{
        toDoProcessNum:19,
        outTask:4,
        tasksToBeReviewed:0,
      },
      columns:[],
      dataSource: [],
      selectedRows: [],
      tableKey:'',
      pageCount: 10, // 每页显示条数
      startIndex: 0, // 起始页第一条
    };
  },
  components: {
    // StandardTable
    commonTable
  },
  mounted(){
    this.standardColumns();
  },
  methods: {
    standardColumns(){
      this.columns = tabColumnFirst;
      if(this.selectTabKey==1){
        this.columns = tabColumnFirst;
        this.dataSource = tabDataFirst;
        this.countList.toDoProcessNum = this.dataSource.length;
      }else if(this.selectTabKey==2){
        this.columns = tabColumnSecond;
        this.dataSource = tabDataSecond;
        this.countList.outTask = this.dataSource.length;
      }else if(this.selectTabKey==3){
        this.columns = tabColumnThird;
        this.dataSource = tabDataThird;
        this.countList.tasksToBeReviewed = this.dataSource.length;
      }
      this.columns = this.columns.map(item=>{
        item.width = 200;
        return item
      })
      this.tableKey = "activityOid";
    },
    changeActive(key) {
      this.selectTabKey = key;
      this.standardColumns();
    },
    //表格选中项
    onSelectChange(id,row){
      this.selectedRows = row
    },
  },
};
</script>
<style lang="less" scoped>
  .wrapper{
    width: 100%;
    background: #fff;
    padding: 10px 20px;
    .tab-title {
      width: 100%;
      height: 30px;
      //background-color: green;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .taskNum {
      min-width: 18px;
      height: 18px;
      border-radius: 100px;
      background-color: #f5222d;
      margin: -15px 0px 0px 5px;
      padding: 0px 3px 0px 3px;
      line-height: 18px;
      color: #ffffff;
      font-size: 12px;
      text-align: center;
    }
  }

</style>
